<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cPress</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/cpress.js"></script>
</head>
<body>
<div class="free-upload">
    <div class="free-upload-photo">
        <span id="photo_img"></span>
        width:<input id="width" value="400"/>
        height:<input id="height" value="400"/>
        <input type="file" id="photo"/>
        <a onclick="xuanzhuan()" style="cursor: pointer">旋转</a>
    </div>
    <img id="img">
</div>

<script type="text/javascript">
    var photo = $('#photo');
    photo.on('change', function (event) {
        if (!isCanvasSupported()) {
            return;
        }
		var w = $("#width").val();
		var h = $("#height").val();
        CanvasCompress(event, w, h, function (base64Img) {
            var json = {
                'base64Img': base64Img
            };
            $("#img").get(0).src = base64Img;
        });
    });

    function xuanzhuan() {
        var base64Img = $("#img").get(0).src;
        CanvasRotate(base64Img, function (data) {
            $("#img").get(0).src = data;
        });
    }


</script>

</body>
</html>